<template>
  <div id="demo">
    <div
      @mousemove="xCoordinate"
      :style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }"
      class="movearea"
    >
      <h3>Move your mouse across the screen...</h3>
      <p>x: {{ x }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  data() {
    return {
      x: 0,
    };
  },
  methods: {
    xCoordinate(e: MouseEvent) {
      this.x = e.clientX;
    },
  },
});
</script>

<style scoped>
.movearea {
  transition: 0.25s background-color ease;
}
</style>